<template>
  <v-card class="w-full h-full" flat rounded border>
    <template v-slot:text>
      <div class="d-flex justify-between">
        <div class="d-flex gap-3">
          <CreateItem
            :width="addDialogWidth"
            @change="e => $emit('add_change', e)"
            :confirm-click="addDialogConfirmClick"
            :btn-name="addDialogBtnName"
            :columns="addDialogColumns"
            :title="addDialogTitle"
            :confirm-btn-name="addDialogConfirmText"
            :confirm-btn-color="addDialogConfirmColor"
            :cancel-btn-name="addDialogCancelText"
            :items="addDialogOpts"
            :icon-limit="addDialogIconLimit"
          />
          <v-btn
            v-for="btn in btns"
            :color="btn.color"
            :prepend-icon="btn.icon"
            @click="btn.action"
            >{{ btn.label }}</v-btn
          >
        </div>
        <div>
          <v-text-field
            v-model="key"
            density="compact"
            prepend-inner-icon="mdi-magnify"
            variant="outlined"
            flat
            hide-details
            single-line
            :placeholder="placeholder"
            class="w-48"
          ></v-text-field>
        </div>
      </div>
      <v-data-table
        v-model:search="key"
        :headers="headers"
        v-model="selected"
        :items="items"
        item-value="name"
        show-select
        v-model:page="pager.page"
        :filter-keys="filters"
      >
        <template #item.action="{ item }">
          <v-btn
            density="comfortable"
            variant="plain"
            color="primary"
            @click="$emit('edit', item)"
            >编辑</v-btn
          >
          <v-btn
            density="comfortable"
            variant="plain"
            color="error"
            @click="(dialog = true) && (cur = item)"
            >删除</v-btn
          >
        </template>
      </v-data-table>
    </template>
  </v-card>
  <v-dialog v-model="dialog" width="auto">
    <v-card
      width="340"
      prepend-icon="mdi-delete"
      text="确定要删除当前子项吗!!!"
      title="温馨提示"
    >
      <template v-slot:actions>
        <v-btn @click="dialog = false">取消</v-btn>
        <v-btn @click="$emit('delete', cur, (dialog = false))" color="error"
          >删除</v-btn
        >
      </template>
    </v-card>
  </v-dialog>
</template>

<script setup lang="ts">
import CreateItem from '../dialog/CreateItem.vue';
import { BtnOptions } from '@/types/btn';
import { FormCardItems } from '@/types/util';
import { reactive, ref, onMounted } from 'vue';
const { headers, onload, morebtn } = defineProps({
  placeholder: { type: String, default: () => '请输入' },
  addDialogWidth: { type: String, default: () => '600' },
  addDialogBtnName: { type: String, default: () => '添加' },
  addDialogColumns: { type: String, default: () => '1' },
  addDialogTitle: { type: String, default: () => '添加' },
  addDialogConfirmText: { type: String, default: () => '确认' },
  addDialogCancelText: { type: String, default: () => '取消' },
  addDialogConfirmColor: { type: String, default: () => 'primary' },
  addDialogConfirmClick: { type: Function },
  addDialogCancelClick: { type: Function },
  addDialogDataChange: { type: Function },
  addDialogOpts: { type: Array<FormCardItems> },
  addDialogIconLimit: { type: Number, default: () => 20 },
  headers: {
    type: Array<any>,
    default: () => [
      { title: '名称', align: 'start', key: 'name' },
      { title: '地址', align: 'center', key: 'location' },
      { title: '操作', align: 'center', key: 'action', width: '160' },
    ],
  },
  onload: {
    type: () => Promise.resolve(),
  },
  morebtn: {
    type: Array<BtnOptions>,
  },
  filters: {
    type: Array<any>,
    default: () => ['name', 'location'],
  },
});
const emit = defineEmits([
  'delete',
  'edit',
  'delete_all',
  'export_all',
  'add_change',
]);

const pager = reactive({
  page: 1,
  pageCount: 2,
});

const dialog = ref(false);
const selected = ref([]);
const items = ref<any[]>([]);
const cur = ref();
const key = ref('');
const btns = ref<BtnOptions[]>([
  {
    label: '批量删除',
    icon: 'mdi-trash-can-outline',
    color: 'error',
    action: () => {},
  },
  {
    label: '数据导出',
    icon: 'mdi-download',
    color: 'info',
    action: () => {},
  },
]);

onMounted(() => {
  onload &&
    onload.then((res: any) => {
      console.log('onload: ' + res);
      items.value = res;
      pager.pageCount = Math.ceil(items.value.length / 10);
    });
  morebtn && btns.value.push(...morebtn);
});
</script>

<style scoped></style>
